<template>
	<u-search placeholder="本周热搜" v-model="keyword"></u-search>
	<view>
        <u-grid
                :border="false"
                col="4"
        >
            <u-grid-item
                    v-for="(listItem, listIndex) in MedicalData"
                    :key="listIndex"
                    @click="click(listItem)" 
            >
                <u-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="listItem.name"
                        :size="22"
                ></u-icon>
                <text class="grid-text">{{listItem.title}}</text>
            </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
    </view>
    <view class="wrap">
        <u-swiper :list="SwiperList" :effect3d="true" @click="clickswiper"></u-swiper>
    </view>
    <u-cell-group>
		<u-cell-item icon="setting-fill" title="为您推荐"></u-cell-item>
	</u-cell-group>
    <medical-list v-if="recommendData && recommendData.length > 0" :list="recommendData"></medical-list>
    <tabbar/>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'
import { computed, ref } from 'vue'
import MedicalList from './component/medical-list.vue'
// 获取 uToast 的引用
const uToast = ref()
// 定义响应式变量
const keyword = ref();
const appStore = useAppStore()
const MedicalData = computed(() => {
    return appStore.getMedicalConfig
        ?.filter((item: any) => item.is_show == 1)
        .map((item: any) => {
            return {
                name: item.name,
                title: item.title,
                pagePath: item.path
            }
        })
})
const SwiperList = computed(() => {
    return appStore.getSwiperConfig
        ?.filter((item: any) => item.is_show == 1)
        .map((item: any) => {
            return {
                title: item.title,
                image: item.image,
                pagepath:item.pagepath
            }
        })
})

const recommendData = computed(() => {
    return appStore.getRecommendConfig
        ?.filter((item: any) => item.is_show == 1)
        .map((item: any) => {
            return {
                title: item.title,
                image: item.image,
                content:item.content,
                id:item.id
            }
        })
})
console.log('Initial recommendData:', recommendData.value);
const click = (item: any) => {
	console.log(item)
	// uToast.value.show({
	// 	type:'success',
    //       ...item,
    //       complete() {
    //         item.url &&
	// 		navigateTo({
    //             url: item.url,
    //           });
    //       },
    //     })
}
const clickswiper = (index:any)=>{
    console.log(index)
}
</script>

<style lang="scss">
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
    .wrap {
    padding: 40rpx;
  }
</style>